package com.hippo.core.ui.compose.spt

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.collectAsLazyPagingItems
import coil.compose.rememberAsyncImagePainter
import com.hippo.core.R
import com.hippo.core.core.ext.click
import com.hippo.core.model.Faq
import com.hippo.core.model.Product
import com.hippo.core.ui.components.TextLayout
import com.hippo.core.ui.navigation.AppRoute
import com.hippo.core.ui.theme.HippoTheme
import com.hippo.core.vm.SptVm

@Composable
fun SptScreen(navController: NavController,vm:SptVm = viewModel()) {

    val faqList = vm.faqPager.collectAsLazyPagingItems()
    val productList = vm.productPager.collectAsLazyPagingItems()


    SptContent(
        productList = productList,
        faqList = faqList,
        onProductClick = {
            navController.navigate(AppRoute.ProductDetailScreen.replace("{productId}", it.toString()))
        },
        onFaqClick = {
            navController.navigate(AppRoute.FaqDetailScreen.replace("{faqId}", it.toString()))
        },
    )

}


@Composable
fun SptContent(
    productList: LazyPagingItems<Product>?,
    faqList: LazyPagingItems<Faq>?,
    onProductClick: ((Int) -> Unit),
    onFaqClick: ((Int) -> Unit),
    modifier: Modifier = Modifier,
) {

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(8.dp)
    ) {
        Spacer(Modifier.height(20.dp))

        Text(
            text = stringResource(id = R.string.spt_4),
            style = MaterialTheme.typography.titleLarge
        )

        Column(
            modifier = modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {


            productList?.let {
                LazyRow {
                    items(productList.itemCount) { index ->
                        val item = productList[index]
                        if (item != null) {
                            ItemProduct(item,onProductClick)
                             Spacer(Modifier.width(8.dp))
                        }
                    }
                }
            }


            faqList?.let {
                LazyColumn {
                    items(faqList.itemCount) { index ->
                        val item = faqList[index]
                        TextLayout(
                            text = item?.faqTitle.orEmpty(),
                            modifier = Modifier.padding(top = 16.dp),
                            onClick = {
                                onFaqClick(item?.faqId?:0)
                            }
                        )
                    }
                }
            }

        }
    }

}


@Composable
fun ItemProduct(product: Product, onClick: (Int) -> Unit,modifier: Modifier = Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .background(
                color = Color.White,
                shape = MaterialTheme.shapes.medium
            )
            .border(
                width = 1.dp,
                color = MaterialTheme.colorScheme.outline,
                shape = MaterialTheme.shapes.medium
            )
            .padding(16.dp)
            .click { onClick(product.productId?:0) }
    ) {

        Image(
            painter = rememberAsyncImagePainter(
                product.productImg,
                placeholder = painterResource(id = R.mipmap.h1),
                error = painterResource(id = R.mipmap.h1)
            ),
            contentDescription = null,
            modifier = Modifier.size(120.dp)
        )

        Text(
            text = product.productName.orEmpty(),
            style = MaterialTheme.typography.labelMedium
        )

    }
}


@Preview(showBackground = true)
@Composable
private fun SptScreenPreview() {
    HippoTheme {
        SptScreen(
            navController = rememberNavController()
        )
    }
}
